<template>
	<van-form ref="vanForm">
		<template v-for="item in option.column" :key="item.prop">
			<slot :name="item.prop" v-if="item.formSlot"> </slot>
			<van-field
				v-if="!item.formSlot && !item.type"
				v-model="formOption[item.prop]"
				:readonly="item.readonly || false"
				:required="item.rules?.length ? true : false"
				:name="item.prop"
				:label="item.label + ':'"
				:placeholder="item.placeholder || '请输入' + item.label"
				:rules="item.rules"
				:disabled="item.disabled || false"
				:autocomplete="item.autocomplete || 'off'"
			>
			</van-field>

			<van-field
				v-if="!item.formSlot && item.type == 'textarea'"
				type="textarea"
				:rows="item.rows || 1"
				v-model="formOption[item.prop]"
				:readonly="item.readonly || false"
				:required="item.rules?.length ? true : false"
				:name="item.prop"
				:label="item.label + ':'"
				:placeholder="item.placeholder || '请输入' + item.label"
				:rules="item.rules"
				:disabled="item.disabled || false"
				:maxlength="item.maxlength ? item.maxlength : null"
				:show-word-limit="item.maxlength ? true : false"
				:autocomplete="item.autocomplete || 'off'"

			>
			</van-field>

			<van-field
				v-if="!item.formSlot && item.type == 'select'"
				:model-value="countForm(formOption[item.prop], item.dicData)"
				is-link
				:readonly="true"
				:required="item.rules?.length ? true : false"
				:name="'picker'"
				:label="item.label + ':'"
				:placeholder="item.placeholder || '请选择' + item.label"
				:rules="item.rules"
				:autocomplete="item.autocomplete || 'off'"
				@click="showP(item)"
			>
			</van-field>
		</template>
		<van-popup v-model:show="showPicker" position="bottom">
			<van-picker
				:columns="dicData"
				@confirm="onConfirm"
				@cancel="cancelP"
			/>
		</van-popup>
	</van-form>
</template>

<script lang="ts" setup>
const { proxy } = getCurrentInstance()

const emit = defineEmits()

const props = defineProps({
	option: {
		type: Object,
		default: {},
	},
	modelValue: {
		type: Object,
		default: {},
	},
})

const { option } = toRefs(props)

// 计算form事件双向绑定
const formOption = computed({
	get() {
		return props.modelValue
	},
	set(value) {
		emit('update:modelValue', value)
	},
})

const showPicker = ref(false)
const dicData = ref([])
const dicSele = ref({})

function showP(item) {
	dicSele.value = item
	dicData.value = item.dicData
	showPicker.value = true
}
function cancelP() {
	showPicker.value = false
}

// 下拉框根据value显示text
const countForm = computed(() => {
	return (type, data) => {
		const current = data.filter((item) => item.value == type)
		return current.length ? current[0].text : ''
	}
})

// 触发下拉框confirm选事件
const onConfirm = ({ selectedOptions }) => {
	formOption.value[dicSele.value.prop] = selectedOptions[0].value

	showPicker.value = false
}

function submit() {
	proxy.$refs.vanForm
		.validate()
		.then(() => {
			emit('submit', formOption.value)
		})
		.catch((err) => {
			console.log('请填写完整', err)
		})
}

function reset() {
	formOption.value = {}
}

defineExpose({
	submit,
	reset,
})
</script>

<style lang="scss" scoped>
:deep(.van-field__label) {
	color: #323233;
}
</style>
